<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>stock</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2/lib/index.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2/lib/theme-chalk/index.min.css">
  <style>
    table,
    .el-tag,
    .el-popover,
    .el-divider__text {
      font-size: 1.4rem;
      /* 默认字体大小 */
    }

    .el-loading-spinner .el-loading-text,
    .el-loading-spinner i {
      font-size: 5rem;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-divider content-position="left">股指</el-divider>
    <el-table :data="tableDatahf" style="width: 100%;" :default-sort="{prop: 'percent', order: 'descending'}">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div>
            <iframe :src="getStockQhInfo(scope.row.code)" frameborder="0" style="width: 100%; height: 570px"></iframe>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" min-width="40%">
        <template slot-scope="scope">
          {{ scope.row.name + '('+scope.row.code +')' }}
        </template>
      </el-table-column>
      <el-table-column label="百分" prop="percent" min-width="20%" sortable :sort-method="sortByNumber">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" width="350">
            <el-row>
              <el-col :span="24">{{ scope.row.name + '('+scope.row.code +')' }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">涨跌: {{ scope.row.updown }}</el-col>
              <el-col :span="12">百分:
                <span :style='{color:scope.row.percent.substr(0,1) ==="+"?"#FF0000":"#00FF00"}'>{{ scope.row.percent
                  }}%</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">今开: {{ scope.row.open }}</el-col>
              <el-col :span="12">昨收: {{ scope.row.yestclose }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">最高: {{ scope.row.high }}</el-col>
              <el-col :span="12">最低: {{ scope.row.low }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">成交量: {{ scope.row.volume }}</el-col>
              <el-col :span="12">成交额: {{ scope.row.amount }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24">更新时间: {{ scope.row.time }}</el-col>
            </el-row>

            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.percent.substr(0,1) ==='+'" type="danger" effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
              <el-tag v-else-if="scope.row.percent.substr(0,1) ==='-'" type="success" effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
              <el-tag v-else effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
            </div>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column label="涨跌" prop="updown" min-width="20%"></el-table-column>
      <el-table-column label="价格" prop="price" min-width="20%"></el-table-column>
    </el-table>
    <el-divider content-position="left">美股</el-divider>
    <el-table :data="tableDatausr" style="width: 100%;" :default-sort="{prop: 'percent', order: 'descending'}"
      @expand-change="handleExpandChange">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <image :src="itemStockInfo.timeK" style="width: 49%;" />
          <image :src="itemStockInfo.dailyK" style="width: 49%;" />
          <image :src="itemStockInfo.weeklyK" style="width: 49%;" />
          <image :src="itemStockInfo.monthlyK" style="width: 49%;" />
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" min-width="40%">
        <template slot-scope="scope">
          {{ scope.row.name + '('+scope.row.code +')' }}
        </template>
      </el-table-column>
      <el-table-column label="百分" prop="percent" min-width="20%" sortable :sort-method="sortByNumber">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" width="350">
            <el-row>
              <el-col :span="24">{{ scope.row.name + '('+scope.row.code +')' }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">涨跌: {{ scope.row.updown }}</el-col>
              <el-col :span="12">百分:
                <span :style='{color:scope.row.percent.substr(0,1) ==="+"?"#FF0000":"#00FF00"}'>{{ scope.row.percent
                  }}%</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">今开: {{ scope.row.open }}</el-col>
              <el-col :span="12">昨收: {{ scope.row.yestclose }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">最高: {{ scope.row.high }}</el-col>
              <el-col :span="12">最低: {{ scope.row.low }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">成交量: {{ scope.row.volume }}</el-col>
              <el-col :span="12">成交额: {{ scope.row.amount }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24">更新时间: {{ scope.row.time }}</el-col>
            </el-row>

            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.percent.substr(0,1) ==='+'" type="danger" effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
              <el-tag v-else-if="scope.row.percent.substr(0,1) ==='-'" type="success" effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
              <el-tag v-else effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
            </div>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column label="涨跌" prop="updown" min-width="20%"></el-table-column>
      <el-table-column label="价格" prop="price" min-width="20%"></el-table-column>
    </el-table>

    <el-divider content-position="left">国内</el-divider>
    <el-table :data="tableDatash" style="width: 100%;" :default-sort="{prop: 'percent', order: 'descending'}"
      @expand-change="handleExpandChange">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <image :src="itemStockInfo.timeK" style="width: 49%;" />
          <image :src="itemStockInfo.dailyK" style="width: 49%;" />
          <image :src="itemStockInfo.weeklyK" style="width: 49%;" />
          <image :src="itemStockInfo.monthlyK" style="width: 49%;" />
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" min-width="40%">
        <template slot-scope="scope">
          <span :style='{color:["sh513130"].includes(scope.row.code)?"#FF0000":""}'>
            {{ scope.row.name + '('+scope.row.code +')' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="百分" prop="percent" min-width="20%" sortable :sort-method="sortByNumber">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top" width="350">
            <el-row>
              <el-col :span="24">{{ scope.row.name + '('+scope.row.code +')' }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">涨跌: {{ scope.row.updown }}</el-col>
              <el-col :span="12">百分:
                <span :style='{color:scope.row.percent.substr(0,1) ==="+"?"#FF0000":"#00FF00"}'>{{ scope.row.percent
                  }}%</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">今开: {{ scope.row.open }}</el-col>
              <el-col :span="12">昨收: {{ scope.row.yestclose }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">最高: {{ scope.row.high }}</el-col>
              <el-col :span="12">最低: {{ scope.row.low }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">成交量: {{ scope.row.volume }}</el-col>
              <el-col :span="12">成交额: {{ scope.row.amount }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24">更新时间: {{ scope.row.time }}</el-col>
            </el-row>

            <div slot="reference" class="name-wrapper">
              <el-tag v-if="scope.row.percent.substr(0,1) ==='+'" type="danger" effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
              <el-tag v-else-if="scope.row.percent.substr(0,1) ==='-'" type="success" effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
              <el-tag v-else effect="dark">
                {{ scope.row.percent }}%
              </el-tag>
            </div>
          </el-popover>

        </template>
      </el-table-column>
      <el-table-column label="涨跌" prop="updown" min-width="20%"></el-table-column>
      <el-table-column label="价格" prop="price" min-width="20%"></el-table-column>
    </el-table>

  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        loading: false,
        itemStockInfo: {
          timeK: '',
          dailyK: '',
          weeklyK: '',
          monthlyK: '',
        },
        fundArr: [
          "sh000001",
          "sh000300",
          "sh000016",
          "sh000688",
          "usr_ixic",
          "usr_dji",
          "usr_inx",
          "hf_CHA50CFD",
          "hf_OIL",
          "hf_CL",
          "hf_NG",
          "hf_GC",
          "hf_SI",
          "sh513130",
          "sh513300",
          "sh513730",
          "sh513310",
          "sh513350",
          "sh513520",
          "sz159329",
          "sh513030",
          "sh513080",
          "sz000065",
        ],
        tableDatausr: [],
        tableDatahf: [],
        tableDatash: [],
      },
      mounted() {
        this.getStockInfo();
      },
      methods: {
        sortByNumber(a, b) {
          return parseFloat(a.percent) - parseFloat(b.percent);
        },
        getStockQhInfo(stockCode) {
          stockCode = stockCode.replace('nf_', '').replace('hf_', '').toUpperCase();
          if (/Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent)) {
            return `https://gu.sina.cn/ft/hq/hf.php?symbol=${stockCode}`
          } else {
            return `https://finance.sina.com.cn/futures/quotes/${stockCode}.shtml`
          }
        },
        getStockInfo() {
          this.loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });;
          // fetch('https://sinajs.menlyd.workers.dev?code=' + this.fundArr.join())
          // fetch('https://myfund.vercel.app/api/service?code=' + this.fundArr.join())
          fetch('https://www.menglide.cn/api/service?code=' + this.fundArr.join())
            .then(res => res.json())
            .then(resp => {
              for (let i = 0; i < resp.length; i++) {
                if (resp[i].code.includes('hf')) {
                  this.tableDatahf.push(resp[i])
                } else if (resp[i].code.includes('usr')) {
                  this.tableDatausr.push(resp[i])
                } else {
                  this.tableDatash.push(resp[i])
                }
              }
              this.loading.close();
            })
        },
        handleExpandChange(row, expandedRows) {
          console.log('当前展开行数据：', row, expandedRows);
          if (expandedRows.length > 0) {
            // 例如：触发后台请求获取详情
            this.itemStockInfo = this.stockTrendPic(row.code, row.name, row.code);
            console.log(this.itemStockInfo);
          }

        },
        stockTrendPic(code, name, stockCode) {
          const timestamp = new Date().getTime();
          const codeByImgPath = {
            normal: 'https://image.sinajs.cn/newchart',
            usstock: 'https://image.sinajs.cn/newchart/v5/usstock',
            hk_stock: 'http://image.sinajs.cn/newchart/hk_stock',
            cn_future: 'http://image.sinajs.cn/newchart/v5/futures/china'
          };
          let sszsImg = code;
          let imageName = stockCode.toLowerCase();
          let timeK = `${codeByImgPath.normal}/min/n/${imageName}.gif`;
          let dailyK = `${codeByImgPath.normal}/daily/n/${imageName}.gif`;
          let weeklyK = `${codeByImgPath.normal}/weekly/n/${imageName}.gif`;
          let monthlyK = `${codeByImgPath.normal}/monthly/n/${imageName}.gif`;
          // console.log(dailyK);
          if (stockCode.indexOf('hk') === 0) {
            imageName = stockCode.replace('hk', '');
            sszsImg = imageName;
            timeK = `${codeByImgPath.hk_stock}/min/${sszsImg}.gif?${timestamp}`;
            dailyK = `${codeByImgPath.hk_stock}/daily/${sszsImg}.gif?${timestamp}`;
            weeklyK = `${codeByImgPath.hk_stock}/weekly/${sszsImg}.gif?${timestamp}`;
            monthlyK = `${codeByImgPath.hk_stock}/monthly/${sszsImg}.gif?${timestamp}`;
          } else if (stockCode.indexOf('gb_') === 0) {
            imageName = stockCode.replace('gb_', '.');
            sszsImg = imageName;
            timeK = `${codeByImgPath.usstock}/min/${sszsImg}.gif?${timestamp}`;
            dailyK = `${codeByImgPath.usstock}/daily/${sszsImg}.gif?${timestamp}`;
            weeklyK = `${codeByImgPath.usstock}/weekly/${sszsImg}.gif?${timestamp}`;
            monthlyK = `${codeByImgPath.usstock}/monthly/${sszsImg}.gif?${timestamp}`;
          } else if (stockCode.indexOf('usr_') === 0) {
            imageName = stockCode.replace('usr_', '');
            sszsImg = imageName;
            timeK = `${codeByImgPath.usstock}/min/${sszsImg}.gif?${timestamp}`;
            dailyK = `${codeByImgPath.usstock}/daily/${sszsImg}.gif?${timestamp}`;
            weeklyK = `${codeByImgPath.usstock}/weekly/${sszsImg}.gif?${timestamp}`;
            monthlyK = `${codeByImgPath.usstock}/monthly/${sszsImg}.gif?${timestamp}`;
          } else if (stockCode.indexOf('nf') === 0) {
            // sina 数据源问题，无法规避。周线以上行情存在开盘价错乱问题
            imageName = stockCode.replace('nf_', '');
            sszsImg = imageName;
            timeK = `${codeByImgPath.cn_future}/min/${sszsImg}.gif?${timestamp}`;
            dailyK = `${codeByImgPath.cn_future}/daily/${sszsImg}.gif?${timestamp}`;
            weeklyK = `${codeByImgPath.cn_future}/weekly/${sszsImg}.gif?${timestamp}`;
            monthlyK = `${codeByImgPath.cn_future}/monthly/${sszsImg}.gif?${timestamp}`;
          }
          return {
            timeK,
            dailyK,
            weeklyK,
            monthlyK
          }
        }
      }
    })
  </script>
  <!-- Cloudflare Web Analytics -->
  <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
    data-cf-beacon='{"token": "01555b1af6c14b17b41a06471f26d716"}'></script>
  <!-- End Cloudflare Web Analytics -->
</body>

</html>